<template>
	<view class="full box relative bank-container-wrap flex column">
		<view class="add-bank-wrap w-100" @click="addBank">
			<image src="/static/images/plus-circle.png" class="plus"></image>
			<text class="title">添加银行卡</text>
		</view>
		<view class="relative flex-1 w-100">
			<view class="absolute inset">
				<scroll-view class="full" scroll-y>
					<view class="bank-item" v-for="(item,index) in list" :key="index">
						<view class="header">
							<text class="bank-name">{{ item.bank_name }}</text>
							<text class="bank-type">{{ item.withdrawal_type }}</text>
							<image src="/static/images/edit-icon.png" class="edit-icon" @click="editBankHandle(item)" />
						</view>
						<view class="bank-number">
							<text>{{ item.bank_card }}</text>
							<image src="/static/images/delete-four.png" class="icon"
								@click.stop="removeBankHandle(item.id)" />
						</view>
					</view>
					<view class="empty-wrapper" v-if="isEmpty">
						<u-empty text="您还没有添加银行卡"></u-empty>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['token', 'payload']),
		},
		onShow() {
			const { payload } = this
			if (payload === -1) {
				return this.$toast({ title: '请先登录' }, () => {
					uni.redirectTo({
						url: '/pages/public/login'
					})
				})
			}
			if (payload === -2) {
				return this.$toast({ title: "请先选择店铺" }, () => {
					uni.navigateBack()
				})
			}
			this.initData()
		},
		methods: {
			removeBank(bank_id) {
				this.https('/store/delbank', { ...this.payload, bank_id }).then(resp => {
					const { code, msg } = resp
					this.$toast({ title: msg, time: 2000 })
					if (code === 1) {
						const { list } = this
						const index = list.findIndex(item => item.id === bank_id)
						if (index === -1) return
						this.list.splice(index, 1)
						this.isEmpty = this.list.length === 0
					}
				})
			},
			removeBankHandle(id) {
				wx.showModal({
					title: '温馨提醒',
					content: '您确定删除改银行卡吗?',
					success: res => {
						if (res.cancel) return
						this.removeBank(id)
					}
				})
			},
			editBankHandle(item) {
				this.$store.commit('setTempData', item)
				uni.navigateTo({
					url: "/pages/add-bank/add-bank?type=edit",
				})
			},
			addBank() {
				uni.navigateTo({
					url: '/pages/add-bank/add-bank'
				})
			},
			initData() {
				uni.showLoading({
					title: '正在获取'
				})
				this.https('/store/banklists', this.payload).then(resp => {
					const { code, data, msg } = resp
					if (code !== 1) return this.isEmpty = true
					let list = data || []
					this.list.splice(0, this.list.length, ...list)
					this.isEmpty = this.list.length === 0
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					this.$toast({ title: '获取银行卡失败', time: 2000 }, () => {
						uni.navigateBack()
					})
					console.log(err, 'error');
				})
			},
		},
		data() {
			return {
				isEmpty: false,
				status: 'loadmore',
				list: []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bank-container-wrap {
		line-height: 1;
		background-color: #f1f1f1;
		padding: 32rpx 32rpx 0;

		.empty-wrapper {
			padding: 32rpx;
		}

		.loadmore-wrap {
			padding: 16rpx;

			.loading-wrap {
				display: flex;
				align-items: center;
				justify-content: center;

				.loading-text {
					margin-left: 12rpx;
					font-size: 26rpx;
					color: rgb(96, 98, 102);
				}
			}
		}

		.bank-item {
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			overflow: hidden;
			margin-bottom: 24rpx;

			.bank-number {
				height: 56rpx;
				font-size: 40rpx;
				font-weight: 400;
				color: #1D2129;
				line-height: 56rpx;
				margin-top: 16rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 38rpx;
					height: 38rpx;
					margin-left: auto;
				}
			}

			.header {
				display: flex;
				align-items: center;

				.edit-icon {
					width: 34rpx;
					height: 34rpx;
					margin-left: auto;
				}

				.bank-type {
					font-size: 24rpx;
					font-weight: 400;
					color: #4E5969;
					margin-left: 16rpx;
				}

				.bank-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
				}
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		.add-bank-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 24rpx;
			margin-bottom: 32rpx;
			box-sizing: border-box;


			.title {
				height: 44rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #1D2129;
				line-height: 44rpx;
				margin-left: 8rpx;
			}

			.plus {
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
</style>